/**
 * Created by lee_mxue on 17/5/4.
 */
import React from "react";
import ReactDOM from "react-dom";
import AJAX from "../../lib/ajax";
import Rules from "../../lib/rules";
import { addErrorListener } from "../../lib/handleError"
import weixinShare from "../../lib/weixinShare";
require('../../lib/rem');
require('../SendingPackageHeader/SendingPackageHeader.less');
require('./CabinetSendingHeader.less');
require('../../styles/common.less');
require('../../styles/resetWeui.less');
require('../../styles/lux.less')
let MyCarousel = require('../../components/PictureSlick')
const Toast = require('../MyPackage/components/Toast')


class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isReady: false,     //页面是否加载
            isSubmit: true,    //是否可以提交
            goodsTextAreaIsOpen: false,  //选择物品输入框
            pictureIsOpen: false,  //寄件方式展示
            actionSheetIsOpen: false,   //ActionSheet
            goodsKindIsOpen: false,      //选择物品
            selectDeliveryIsOpen: false,      //选择快递公司
            agreementIsOpen: true,      //协议是否同意
            orderHomeInfo: {
                activity_msg: null, //str 寄件优惠信息描述，如果没有，此项为null
                sender_addr: null, //最近一次寄件地址信息，如果没有，此项为null
                nearest_logis: null, //最近物流中心
                last_express: null, //最近一次寄件的快递公司，如果没有，此项为null
            },  //国内寄件首页信息
            img_data: [
                {src: "http://cdn.jinlb.cn/pic/4c/d3/4cd351e39b1c0ae5d0c5db5e1acec8fb.jpg"},
                {src: "http://cdn.jinlb.cn/pic/53/7e/537e626ac73155af0280310e846b5f3b.jpg"},
                {src: "http://cdn.jinlb.cn/pic/f9/1e/f91e4b3c0f5376720b36437da8dd8607.jpg"},
                {src: "http://cdn.jinlb.cn/pic/cf/5b/cf5b0f512dc6b2af1b9e59e816d76179.jpg"},
                {src: "http://cdn.jinlb.cn/pic/9f/9d/9f9d4e24b5d467484ff572e9eed4cb47.jpg"},
            ],    //寄件方式预览图片数据列表
            selectedCabinet: {
                id: 0,
                name: undefined
            },      //已选柜体
            selectExpress: undefined,      //已选快递公司
            selectSendingAddr: undefined,  //寄件人详细地址
            selectSite: "请填写寄件人信息",  //寄件人信息
            selectSiteId: 0,  //已选站点Id
            selectReceiver: "请选择收件人详细地址",   //已选收货人详细地址
            selectReceiverAddress: undefined,  //已选收货人地址
            selectReceiverInfo: undefined,  //已选收货人信息
            destinationProvinceCode: "", //目的地省份编码
            selectGoodName: '请选择物品', //选择物品名称
            selectGoodName_id: 0, //选择物品id
            //－－－－－－－－－－－－－－－－－－快递公司－－－－－－－－－－－－－－－－－－
            current: 1, //快递公司－－－当前页码
            loadCount: 1,    //快递公司－－－加载次数
            sortby: 1,      //快递公司－－－列表排序方式
            expressCount: 0,   //列表总数
            expressList: [],    //快递公司列表
            calc_fee: 0,    //订单总费用（估算）

        };
        this.switchGoodsTextarea = this.switchGoodsTextarea.bind(this);
        this.getInputValue = this.getInputValue.bind(this); //获取输入框value
        this.switchSiteList = this.switchSiteList.bind(this);
        this.handleSelectGood = this.handleSelectGood.bind(this);   //选择物品
        this.switchPicture = this.switchPicture.bind(this);   //查看寄件方式
        this.handleSelectGoodList = this.handleSelectGoodList.bind(this);   //选择物品列表
        this.getOrderFeeList = this.getOrderFeeList.bind(this);   //获取快递公司
        this.handleSelectExpress = this.handleSelectExpress.bind(this);   //选择快递公司
        this.handleGetDefaultExpress = this.handleGetDefaultExpress.bind(this);   //获取默认快递公司
        this.handleSwitchAgree = this.handleSwitchAgree.bind(this);   //同意协议
        this.handleSubmit = this.handleSubmit.bind(this);   //提交寄件单
    }

    componentWillMount() {
        var _this = this;
        addErrorListener()()
        //隐藏分享功能
        weixinShare.hideAll();
        //获取寄件首页信息
        AJAX.request("sending_cab_order_home", {}, (data) => {

            if (data.code == 0) {
                //国内寄件首页信息
                var myOrderHomeInfo = {
                    sender_addr: data.body.sender_addr,     //最近一次寄件地址信息，如果没有，此项为null
                };

                //将国内寄件首页信息－默认信息存入localstorage
                _this.setState({
                    orderHomeInfo: myOrderHomeInfo,
                    isReady: true,     //页面是否加载
                    is_id_authed: data.body.is_id_authed
                })

                //－－－－－－－－－－－－－－－－－－获取localStorage－－－－－－－－－－－－－－－－－－
                //寄件人信息
                var sender_addr = JSON.parse(localStorage.getItem('cabinet_sender_addr_x'));
                //如果没有填写寄件地址－－－设置默认
                if (!sender_addr) {
                    //设置默认寄件信息
                    _this.setState({
                        selectSite: myOrderHomeInfo.sender_addr.realname + myOrderHomeInfo.sender_addr.phone
                    })
                    if (myOrderHomeInfo.sender_addr.address) {
                        _this.setState({
                            selectSendingAddr: myOrderHomeInfo.sender_addr.address
                        })
                    }
                    window.localStorage.cabinet_sender_addr_x = JSON.stringify(myOrderHomeInfo.sender_addr)
                } else {
                    _this.setState({
                        selectSite: sender_addr.realname + sender_addr.phone
                    })
                    //寄件详细地址
                    if (sender_addr.address) {
                        _this.setState({
                            selectSendingAddr: sender_addr.address
                        })
                    }
                }
            }
        })

        //    获取已有信息
        //获取已选柜体信息
        var CabinetSendingInfo_x = JSON.parse(window.localStorage.getItem('CabinetSendingInfo_x'));
        if (CabinetSendingInfo_x) {
            this.setState({
                selectedCabinet: CabinetSendingInfo_x
            })
        }

        // 收件人地址
        var receiverData = JSON.parse(localStorage.getItem('cabinet_receiverData_x'));
        if (receiverData) {
            this.setState({
                selectReceiverInfo: receiverData,
                selectReceiver: receiverData.realname + receiverData.phone,
                selectReceiverAddress: receiverData.province + receiverData.city + receiverData.county + receiverData.address,
            })
        }
        //物品信息---已选物品名称
        var sendingPackageHeader_goodName_x = JSON.parse(localStorage.getItem('sendingPackageHeader_goodName_x'));
        if (sendingPackageHeader_goodName_x) {
            this.setState({
                selectGoodName: sendingPackageHeader_goodName_x.selectGoodName,
                selectGoodName_id: sendingPackageHeader_goodName_x.selectGoodName_id
            })
        }
        //已选快递公司
        const selected_express_company = JSON.parse(localStorage.getItem('selected_express_company')) || []; 
        if (selected_express_company.length > 0) {
            const selected_express_company_name_list = selected_express_company.map(d=>d.name)
            let selected_express_company_name = selected_express_company_name_list.slice(0,3).join(",")
            if(selected_express_company_name_list.length > 3) {
                selected_express_company_name += "..."
            }
            let calc_fee = 0
            selected_express_company.forEach(d=>{
                if(d.price > calc_fee) {
                    calc_fee = d.price
                }
            })
            this.setState({
                selected_express_company,
                selected_express_company_name,
                // selectExpress: sendingPackageHeader_expressInfo_x.selectExpress,
                calc_fee: calc_fee       //分
            })
        }
    }


    componentDidMount() {
        AJAX.appendBaiduAnalysis()
    }

    //toast弹窗
    warn(content) {
        Toast.warn({
            content: content
        })
    }

    success() {
        Toast.success({
            content: "成功"
        })
    }

    error() {
        Toast.error({
            content: "失败"
        })
    }

    loading() {
        Toast.loading({
            content: "数据加载中"
        })
    }

    //查看寄件方式
    switchPicture() {
        var _this = this;
        this.setState({
            pictureIsOpen: !_this.state.pictureIsOpen
        })
    }

    //实名认证
    authentication() {
        if(this.state.is_id_authed === 0){
            window.location.href = './Authentication'
        }
    }

    //ActionSheet
    switchSiteList(isOpen, type = "actionSheetIsOpen") {
        var _this = this;
        //重置
        this.setState({
            goodsTextAreaIsOpen: false,  //选择物品输入框
            weightTextAreaIsOpen: false,  //选择物品重量输入框
            paymentTextAreaIsOpen: false,  //选择付款方式输入框
            goodsWeightIsOpen: false,   //选择物品重量
            goodsKindIsOpen: false,      //选择物品
            addedServicesIsOpen: false,      //选择增值服务
            selectDeliveryIsOpen: false,      //选择快递公司
            selectPaymentIsOpen: false,      //选择付款方式
        })
        //------------------开弹窗 isOpen = true --------------
        //快递公司
        if (type == "selectDeliveryIsOpen") {
            if (this.state.selectedCabinet.id == 0) {
                this.warn("请先选择智能快递柜")
            } else if (!this.state.selectReceiverInfo) {
                //目的地省份编码
                this.warn("请先选择收货地址")
            } else {
                //获取快递公司
                // _this.getOrderFeeList(2, 1);
                window.location.href="./ChooseExpressCompany"
            }
        } else {
            this.setState({
                actionSheetIsOpen: isOpen,
                [type]: isOpen
            })
        }
        //增值服务（保价）
        if (type == "addedServicesIsOpen" && !this.state.selectExpress) {
            this.warn("请先选择快递公司");
        }

        //------------------关弹窗 isOpen = false --------------
    }

    //获取快递公司列表（ 快递公司id, 保价估值, 排序方式－－－1.综合（利润）2.价格3.速度，默认1）
    getOrderFeeList(sortby, current) {
        // alert(current)
        var _this = this;
        this.setState({
            sortby: sortby,
        })
        AJAX.request("sending_cab_order_fee_list", {
            sortby: sortby,         //排序方式
            cabinet_id: this.state.selectedCabinet.id,   //物流中心id
            province_code: this.state.selectReceiverInfo.province_code,   //目的省份编码
            city_code: this.state.selectReceiverInfo.city_code,   //目的城市编码
            county_code: this.state.selectReceiverInfo.county_code,   //目的区县编码
        }, (data) => {
            if (data.code == 0) {
                let myExpressListData = {
                    count: data.body.count,
                    list: data.body.list
                }
                // alert(JSON.stringify(myExpressListData))
                _this.setState({
                    expressList: myExpressListData.list,
                    expressCount: myExpressListData.count,
                    actionSheetIsOpen: true,
                    selectDeliveryIsOpen: true,
                    sortby: sortby
                })

            }
        })
    }

    //选择快递公司
    handleSelectExpress(item) {
        var _this = this;
        this.switchSiteList(false)
    }

    //物品名称－－－其他选项输入框
    switchGoodsTextarea(id) {
        //    验证物品名称
        //当物品输入框关闭时
        if (this.state.goodsTextAreaIsOpen) {
            //输入框内文本不为空时
            if (this.state.selectGoodName.length != 0) {
                if (!Rules.len(this.state.selectGoodName, 1, 20)) {
                    this.warn("物品名称格式错误")
                } else {
                    //验证通过
                    this.setState({
                        goodsTextAreaIsOpen: !this.state.goodsTextAreaIsOpen,
                        selectGoodName_id: id
                    })
                    if (this.state.goodsTextAreaIsOpen == true) {
                        // this.handleSelectGoodList()
                        this.switchSiteList(false)
                    }
                    //将已选物品存入localStorage------sendingPackageHeader_goodName_x
                    window.localStorage.sendingPackageHeader_goodName_x = JSON.stringify({
                        selectGoodName: this.state.selectGoodName,
                        selectGoodName_id: id
                    })

                }
            } else {
                this.warn("请输入物品名称")
            }
        } else {
            //当物品输入框打开时
            this.setState({
                selectGoodName: '',
                goodsTextAreaIsOpen: !this.state.goodsTextAreaIsOpen,
                selectGoodName_id: id
            })
            if (this.state.goodsTextAreaIsOpen == true) {
                // this.handleSelectGoodList()
                this.switchSiteList(false)
            }
        }
    }

    //获取输入框value
    getInputValue(type, e) {
        var value = e.target.value;
        this.setState({
            [type]: value
        })
    }


    //选择物品---列表
    handleSelectGoodList() {
        this.setState({
            goodsWeightIsOpen: !this.state.goodsWeightIsOpen,
            goodsKindIsOpen: !this.state.goodsKindIsOpen,
            weightTextAreaIsOpen: false,  //选择物品重量输入框
        })
    }

    //选择物品
    handleSelectGood(pkg_type, id) {
        // console.log("pkg_type: ", pkg_type)
        this.setState({
            goodsTextAreaIsOpen: false, //物品输入框关闭
            selectGoodName: pkg_type,   //已选物品名称
            selectGoodName_id: id
        })

        //将已选物品存入localStorage------sendingPackageHeader_goodName_x
        window.localStorage.sendingPackageHeader_goodName_x = JSON.stringify({
            selectGoodName: pkg_type,
            selectGoodName_id: id
        })
        // this.handleSelectGoodList()
        this.switchSiteList(false)
    }

    //获取默认快递公司
    handleGetDefaultExpress(weight) {
        var _this = this;

        AJAX.request("order_fee_list", {
            page: 1,
            psize: 1,
            logis_id: this.state.selectSiteId,   //物流中心id
            province_code: this.state.selectReceiverInfo.province_code,   //目的省份编码
            city_code: this.state.selectReceiverInfo.city_code,   //目的城市编码
            county_code: this.state.selectReceiverInfo.county_code,   //目的区县编码
            weight: weight * 1000,   //包裹重量
        }, (data) => {
            if (data.code == 0) {
                let myExpressListData = {
                    count: data.body.count,
                    list: data.body.list
                }
                _this.setState({
                    selectExpress: myExpressListData.list[0],
                })

                //如果设置保价－－－重新获取保价
                if (this.state.insureFee != 0) {
                    AJAX.request("order_get_insure_fee", {
                        evaluation: parseInt(this.state.selectGoodPrice * 100),   //保价估值
                        tariff_id: myExpressListData.list[0].tariff_id,   //资费id
                    }, (data) => {
                        if (data.code == 0) {
                            var myInsureFee = data.body.insure_fee;
                            // alert(myInsureFee)
                            _this.setState({
                                insureFee: myInsureFee,     //(分)
                                showInsureFee: myInsureFee, //保价显示
                                calc_fee: myExpressListData.list[0].amount + myInsureFee        //订单总费用 分
                            })
                            //将默认快递公司存入localStorage------sendingPackageHeader_feeInfo_x
                            window.localStorage.sendingPackageHeader_defaultExpress_x = JSON.stringify({
                                selectExpress: myExpressListData.list[0],
                                calc_fee: myExpressListData.list[0].amount + myInsureFee       //分
                            })
                            //将已填保价和总价存入localStorage------sendingPackageHeader_feeInfo_x
                            window.localStorage.sendingPackageHeader_insureFee_x = JSON.stringify({
                                insureFee: myInsureFee,     //(分)
                                showInsureFee: myInsureFee, //保价显示
                                calc_fee: myExpressListData.list[0].amount + myInsureFee         //分
                            })
                        }
                    })
                } else {
                    this.setState({
                        calc_fee: myExpressListData.list[0].amount    //分
                    })
                    //将默认快递公司存入localStorage------sendingPackageHeader_feeInfo_x
                    window.localStorage.sendingPackageHeader_defaultExpress_x = JSON.stringify({
                        selectExpress: myExpressListData.list[0],
                        calc_fee: myExpressListData.list[0].amount     //分
                    })

                }


            }
        })
    }

    //同意协议
    handleSwitchAgree() {
        this.setState({
            agreementIsOpen: !this.state.agreementIsOpen
        })
    }

    //显示价格的提示
    showTips() {
        if(!this.state.show_tip){
            this.setState({
                show_tip: true
            },()=>{
                setTimeout(()=>{
                    this.setState({
                        show_tip: false
                    })
                }, 10000)
            })
        }
    }

    //提交
    handleSubmit() {
        var _this = this;
        //获取已选柜体信息
        var CabinetSendingInfo_x = JSON.parse(window.localStorage.getItem('CabinetSendingInfo_x'));
        //获取收件人信息
        var consignee_addr = JSON.parse(localStorage.getItem("cabinet_receiverData_x"))
        //获取寄件人信息
        var sender_addr = localStorage.getItem("cabinet_sender_addr_x")
        //获取已选快递公司
        const {selected_express_company, selected_express_company_name, calc_fee,
            is_id_authed} = this.state

        if (!CabinetSendingInfo_x) {
            this.warn("请选择智能柜")
        } else if (!JSON.parse(sender_addr)) {
            this.warn("请填写寄件人信息")
        } else if (!consignee_addr) {
            this.warn("请选择收件人")
        } else if (this.state.selectGoodName_id == 0) {
            this.warn("请选择所寄物品")
        } else if (!selected_express_company_name) {
            this.warn("请先选择快递公司")
        } else if (!this.state.agreementIsOpen) {
            this.warn("不可提交")
        } else if (CabinetSendingInfo_x.need_id_auth === 1 && is_id_authed === 0) {
            this.warn("需要实名认证后才可提交")
        }else {
            //如果isSubmit＝false; 禁止提交
            if (!this.state.isSubmit) {
                return;
            } else {
                const express_list = selected_express_company.map(d=>({
                    express_id: d.id,
                    tariff_id: d.tariff_id
                }))
                this.setState({
                        isSubmit: false,    //是否可以提交
                    }, ()=> {
                        AJAX.request("sending_cab_order_save", {
                            province_code: '',   //目的省份编码
                            sender_addr: sender_addr,   //寄件人信息
                            consignee_addr_id: consignee_addr.id,   //收件人地址id
                            cabinet_id: CabinetSendingInfo_x.id,   //柜体id
                            pkg_type: this.state.selectGoodName,   //包裹名称
                            fee: calc_fee*100,   //快递费用（整数，单位分），(快递公司列表返回值中的amount，基础价格)
                            express_list: JSON.stringify(express_list)
                        }, (data) => {
                            if (data.code == 0) {
                                _this.setState({
                                    isSubmit: true,    //是否可以提交
                                })
                                this.clearStorage()
                                this.success();
                                window.location.href = `./CabinetSendingSuccess?order_id=${data.body.order_id}`
                            }else if(data.code === 15407) {
                                _this.setState({
                                    isSubmit: true,    //是否可以提交
                                })
                                Toast.error({
                                    content: "寄件人姓名与认证姓名不符"
                                })
                            }
                        })
                    }
                )
            }
        }
    }
    
    clearStorage(){
        // 清除寄件页面localStorage
        window.localStorage.removeItem("CabinetSendingInfo_x");  //柜体信息
        window.localStorage.removeItem("cabinet_receiverData_x");  //收件人信息
        window.localStorage.removeItem("sendingPackageHeader_goodName_x");  //物品信息
        window.localStorage.removeItem("selected_express_company") //快递公司信息
    }

    render() {
        // alert(this.state.actionSheetIsOpen)
        // console.log("weightTextAreaIsOpen: ",this.state.weightTextAreaIsOpen)
        // console.log("expressListData: ",this.state.expressListData)
        // console.log(" this.state.actionSheetIsOpen: ", this.state.actionSheetIsOpen)
        // alert(this.state.expressListData.list)
        const loader = <div className="loader"></div>
        const calc_fee = this.state.calc_fee.toFixed(2) 
        // console.log("goodsTextAreaIsOpen: ", this.state.goodsTextAreaIsOpen);
        var goodsInputClassName = this.state.goodsTextAreaIsOpen ? "flex" : "none"; //物品名称－－－其他
        var actionSheetClassName = this.state.actionSheetIsOpen ? " weui-actionsheet weui-actionsheet_toggle" : "weui-actionsheet"; //actionsheet
        var maskClassName = this.state.actionSheetIsOpen ? " weui-mask" : "weui-mask none"; //action sheet 遮罩层
        return (
            this.state.isReady &&
            <div className="main">
                {this.state.orderHomeInfo.activity_msg && <div className=" top_active">
                    <p className="of_scroll">{this.state.orderHomeInfo.activity_msg}</p>
                </div>}

                <div className="flex_column center_content">
                    <div className="content_top">
                        <div className=" weui-cells">
                            <a className="weui-cell weui-cell_access"
                               href="./SendingPackageChooseSite?send_type=2">
                                <div className="weui-cell__hd">
                                    <img src="//wechat.jinlb.cn/assets/images/iconji.png" alt=""
                                         style={{width: 40, marginRight: 5, display: "block"}}/>
                                </div>
                                <div className="weui-cell__bd">
                                    <p className="lineH22">{this.state.selectSite}</p>
                                    {this.state.selectSendingAddr &&
                                    <p className="noWrap lineH22">{this.state.selectSendingAddr}</p>}

                                </div>
                                <div className="weui-cell__ft"></div>
                            </a>
                            <a className="weui-cell weui-cell_access"
                               href="./SendingPackageReceiverAddress?send_type=2">
                                <div className="weui-cell__hd">
                                    <img src="//wechat.jinlb.cn/assets/images/iconshou.png" alt=""
                                         style={{width: 40, marginRight: 5, display: "block"}}/>
                                </div>
                                <div className="weui-cell__bd">
                                    <p className="lineH22">{this.state.selectReceiver}</p>
                                    {this.state.selectReceiverAddress &&
                                    <p className="noWrap lineH22">{this.state.selectReceiverAddress}</p>}


                                </div>
                                <div className="weui-cell__ft"></div>
                            </a>
                        </div>
                    </div>
                    <div className="content_center ">
                        <div className="weui-cells">
                            <a className="weui-cell weui-cell_access" style={{'height': '.44rem'}}
                               href="./CabinetNearbyList">
                                <div className="weui-cell__bd noWrap">
                                    智能柜
                                </div>
                                <div
                                    className="weui-cell__ft">{this.state.selectedCabinet.name ? this.state.selectedCabinet.name : "请选择智能柜"}</div>
                            </a>
                            <a className="weui-cell weui-cell_access"
                               onClick={this.switchSiteList.bind(this, true, "goodsKindIsOpen")}>
                                <div className="weui-cell__bd">
                                    <p>物品</p>
                                </div>
                                <div className="weui-cell__ft">
                                    <span>{this.state.selectGoodName}</span>
                                    <span>{this.state.selectGoodWeight ? this.state.selectGoodWeight + 'Kg' : ""}</span>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div className="content_center">
                        <div className="weui-cells">
                            <a className="weui-cell weui-cell_access"
                               onClick={this.switchPicture}>
                                <div className="weui-cell__bd">
                                    <p>寄件方式</p>
                                </div>
                                <div
                                    className="weui-cell__ft">智能柜寄件
                                </div>
                            </a>
                            <a className="weui-cell weui-cell_access"
                               onClick={this.switchSiteList.bind(this, true, "selectDeliveryIsOpen")}>
                                <div className="weui-cell__bd">
                                    <p>快递公司</p>
                                </div>
                                <div
                                    className="weui-cell__ft">{this.state.selected_express_company_name ? this.state.selected_express_company_name : '请选择快递公司'}</div>
                            </a>
                        </div>
                    </div>
                    <div className="content_bottom">
                        <div className="weui-cells">
                            <a className="weui-cell weui-cell_access"
                               onClick={this.authentication.bind(this)}>
                                <div className="weui-cell__bd">
                                    <p>身份认证</p>
                                </div>
                                <div className="weui-cell__ft">
                                    { 
                                        this.state.is_id_authed === 0 
                                        ? <span className="textRed">未实名认证</span> 
                                        : <span className="textGreen">已认证</span>
                                    }
                                </div>
                            </a>
                        </div>
                    </div>

                    <p className="agreement">
                        <i className={`iconfont ${!this.state.agreementIsOpen ? '' + 'textGray icon-duigouzhuanhuan' : '' + 'textGreen icon-duigou'}` }
                           onClick={this.handleSwitchAgree}></i>
                        <span>我同意</span>
                        <a href="./CabinetProvision" className="textBlue">《快件运单契约条款》</a>

                    </p>
                </div>
                {
                    this.state.show_tip 
                    ? <div className="lux-fee-warn">
                        该费用估算为快递柜最小格口投放费用，实际价格会根据投放的快递柜格口大小变化。
                      </div>
                    : null  
                }
                <div className="gray bottom_submit">
                    <div className="">
                        <p className="lux-fee">
                            <span>费用估算： </span>
                            <span className="textRed">¥ {calc_fee}</span>
                            {
                                calc_fee > 0
                                ? <span className="lux-fee-icon" onClick={this.showTips.bind(this)}>
                                    <i className="iconfont icon-iconfontjinggao"/>
                                  </span>
                                : null  
                            }
                        </p>
                    </div>
                    <div className=" yellow" onClick={this.handleSubmit}>提交</div>
                </div>

                <div>
                    <div className={maskClassName} id="iosMask" onClick={this.switchSiteList.bind(this, false)}></div>
                    <div className={actionSheetClassName} id="iosActionsheet">

                        {/*选择物品*/}
                        {this.state.goodsKindIsOpen && <div className="weui-cells">
                            <div className="weui-cell textWhite red cancel">
                                <div className="weui-cell__bd">
                                    <p className="center"> 温馨提示：柜体寄件最大重量不可以超过5公斤。 </p>
                                </div>
                            </div>
                            <div className="weui-cell cancel">
                                <div className="weui-cell__bd">
                                    <p className="center"> 物品名称 </p>
                                </div>
                                <div className="weui-cell__ft" onClick={this.switchSiteList.bind(this, false)}>
                                    <i className="iconfont iconG icon-cha"></i>
                                </div>
                            </div>
                            <div className="weui-actionsheet__menu goods">
                                <span data-id="1"
                                      className={`${this.state.selectGoodName_id == 1 ? '' + ' bg_Y' : +'' + ' bg_G'}`}
                                      onClick={this.handleSelectGood.bind(this, "文件", 1)}> 文件 </span>

                                <span data-id="2"
                                      className={`${this.state.selectGoodName_id == 2 ? '' + ' bg_Y' : +'' + ' bg_G'}`}
                                      onClick={this.handleSelectGood.bind(this, "数码产品", 2)}> 数码产品 </span>

                                <span data-id="3"
                                      className={`${this.state.selectGoodName_id == 3 ? '' + ' bg_Y' : +'' + ' bg_G'}`}
                                      onClick={this.handleSelectGood.bind(this, "生活用品", 3)}> 生活用品 </span>

                                <span data-id="4"
                                      className={`${this.state.selectGoodName_id == 4 ? '' + ' bg_Y' : +'' + ' bg_G'}`}
                                      onClick={this.handleSelectGood.bind(this, "服饰", 4)}> 服饰 </span>

                                <span data-id="5"
                                      className={`${this.state.selectGoodName_id == 5 ? '' + ' bg_Y' : +'' + ' bg_G'}`}
                                      onClick={this.handleSelectGood.bind(this, "食品", 5)}> 食品 </span>

                                <span className={`${this.state.selectGoodName_id == 6 ? '' + ' bg_Y' : +'' + ' bg_G'}`}
                                      onClick={this.switchGoodsTextarea.bind(this, 6)}> 其他 </span>
                                <p className={goodsInputClassName}>
                                    <input type="text" name="" placeholder="请告我们您寄的是什么？"
                                           onChange={this.getInputValue.bind(this, 'selectGoodName')} id=""/>
                                    <span onClick={this.switchGoodsTextarea.bind(this, 6)}>确定</span>
                                </p>
                            </div>
                        </div>}


                        {/*选择快递公司*/}
                        {this.state.selectDeliveryIsOpen && <div className="weui-cells">
                            <div className="weui-cell cancel">
                                <div className="weui-cell__bd">
                                    <p className="center">
                                    </p>
                                </div>
                                <div className="weui-cell__ft" onClick={this.switchSiteList.bind(this, false)}>
                                    <i className="iconfont iconG icon-cha"></i>
                                </div>
                            </div>
                            <a className="weui-cell weui-cell_access fontSize12px select_good">
                                <div className="weui-cell__bd">
                                    <p className="actionSheet_title">
                                        <span className={` ${this.state.sortby == 2 ? '' + 'textBlue' : ''}`}
                                              onClick={this.getOrderFeeList.bind(this, 2, 1)}>价格</span>
                                        <span className={` ${this.state.sortby == 3 ? '' + 'textBlue' : ''}`}
                                              onClick={this.getOrderFeeList.bind(this, 3, 1)}>时效</span>
                                    </p>
                                </div>
                            </a>
                            <div style={{height: '2rem', overflow: 'scroll'}}>

                                <div className="weui-actionsheet__menu">
                                    {
                                        this.state.expressList.map(item => {
                                            return (
                                                <div className="weui-cell delivery-item"
                                                     onClick={this.handleSelectExpress.bind(this, item)}>
                                                    <div className="weui-cell__hd">
                                                        <img src={item.img} alt=""
                                                             style={{width: 40, marginRight: 5, display: "block"}}/>
                                                    </div>
                                                    <div className="weui-cell__bd">
                                                        <div>
                                                            <p className="flex">
                                                                <span>{item.name}</span>
                                                                <span>参考价：<span
                                                                    className="textRed">{item.price / 100}</span>元</span>
                                                            </p>
                                                            <p className="fontSize12px flex textGray">
                                                                <span>配送方式：{item.send_way_desc}</span>
                                                                <span>预计送达时间： {item.arrive_time}天</span>
                                                            </p>
                                                        </div>
                                                    </div>
                                                </div>
                                            )
                                        })
                                    }
                                </div>

                            </div>
                        </div>}

                    </div>
                </div>
                {/*寄件方式图片展示*/}
                {this.state.pictureIsOpen &&
                <MyCarousel switchPicture={this.switchPicture} img_data={this.state.img_data}/>}
            </div>
        )
    }
}
ReactDOM.render(<App />, document.getElementById('app'));
if (module.hot) {
    module.hot.accept();
}